<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本使用</title>
</head>

<body>
    <button id="btn">点击抽奖</button>
    <script>
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }
        // 点击按钮, 2s 后显示是否中奖.  30% 概率中奖  『1-100』
        // 中奖弹出   恭喜恭喜   显示中奖号码
        // 未中奖弹出  再接再厉   显示数字

        //获取按钮
        let btn = document.querySelector('#btn');

        //原生写法
        btn.onclick = function(){
            //定时器
            setTimeout(() => {
                //判断用户是否中奖
                let num = rand(1, 100);
                //判断数字
                if(num <= 30){
                    alert('恭喜恭喜, 中奖啦, 您的中奖号码为' + num)
                }else{
                    alert('再接再厉, 您的号码为' + num);
                }
            }, 2000)
        }

        //Promise 形式
        btn.onclick = function(){
            // resolve 解决    reject 拒绝     承诺
            let p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    //获得随机数
                    let num = rand(1, 100);
                    //判断
                    if(num <= 30){
                        //中奖啦   异步任务成功啦, 执行 resolve 函数
                        resolve(num);
                    }else{
                        //没中奖   异步任务失败啦, 就执行 reject 函数
                        reject(num); 
                    }
                }, 2000);
            });
        
            //调用 then(然后) 方法
            p.then(value => {  //value 值
                console.log('恭喜恭喜 中奖啦~~ 您的中奖号码为' + value);
            }, reason => { // reason 原因
                console.log('再接再厉 您的号码为' + reason);
            });
        }
        
    </script>
</body>

</html>